<template>
  <div class="faxian">
    <!-- 搜素框 -->
    <van-search
      v-model="value"
      shape="round"
      show-action
      background="#c20c0c"
      placeholder="请输入搜索关键词"
      autofocus
      @input="searchAll"
      @cancel="onCancel"
    />
    <!-- 展示列表 -->
    <van-list v-show="searchArr">
      <div
        class="playmusic"
        v-for="item in searchArr"
        :key="item.id"
        @click="goplaymusic(item.id)"
      >
        <p>歌曲:{{ item.name }}<van-icon name="play-circle-o" /></p>
      </div>
    </van-list>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.bannerId">
        <img :src="item.pic" alt="" />
      </van-swipe-item>
    </van-swipe>

    <h3 style="padding: 10px" @click="$router.push('/mvs')">
      最新MV<van-icon name="arrow" />
    </h3>
    <div class="singer">
      <div v-for="item in singers" :key="item.id" @click="gomvs(item.id)">
        <img :src="item.cover" />
        <p>{{ item.name }}</p>
      </div>
    </div>

    <h3 style="padding: 10px" @click="$router.push('/playerall')">热门歌手<van-icon name="arrow" /></h3>
    <div class="singer">
      <div v-for="item in artists" :key="item.id" @click="goplayer(item.id)">
        <img :src="item.picUrl" />
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanner,
  getMvs,
  getsinger,
  searchAPI,
} from "../../api/music";
export default {
  data() {
    return {
      value: "",
      banners: [],
      singers: [],
      artists: [],
      searchArr: null,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //搜索
    async searchAll(key) {
      const result = await searchAPI(key);
      console.log(result);
      this.searchArr = result.result.songs;
    },
    onCancel() {
      this.value = "";
      this.searchArr = null;
    },
    //获取banner
    async getBanners() {
      const result = await getBanner();
      console.log(result);
      this.banners = result.banners;
    },
    //获取最新mv
    async getmvs(num) {
      const result = await getMvs(num);
      console.log(result);
      this.singers = result.data;
    },
    //跳转mv播放页面
    gomvs(id) {
      this.$router.push(`/singersongs/${id}`);
    },
    //获取歌手分类
    async getplayers(num) {
      const result = await getsinger(num);
      console.log(result);
      this.artists = result.artists;
    },
    //跳转歌手详情页
     goplayer(id) {
      this.$router.push(`/playmusicer/${id}`)
    },
    //跳转播放页面
    goplaymusic(id) {
      this.$router.push(`/musictext/${id}`);
    },
  },
  created() {
    this.getBanners();
    this.getmvs(6);
    this.getplayers(6);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item img{
  display: block;
  width: 100%;
  height: 100%;
}
.singer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.singer p {
  text-align: center;
  width: 100px;
  font-size: 12px;
  -webkit-line-clamp: 1; /* 显示多少行 */
  display: -webkit-box; /* 配合上面使用 伸缩盒 */
  -webkit-box-orient: vertical; /* 检测排列方式 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出文本省略号 */
}
.singer img {
  display: block;
  width: 100px;
  height: 100%;
  box-shadow: 0px 0px 2px;
  border-radius: 5px;
}
.van-list {
  position: absolute;
  top: 54px;
  z-index: 99;
  background-color: #fff;
  width: 100%;
}
.playmusic {
  padding: 10px;
}
</style>